<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>

<body>
    <input type="file" id="fileUp" accept="image/*">
    <hr>
    <img id="serverImg">
    <script src=" https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script>
        function convertBase64(file) {
            return new Promise(resolve => {
                let fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (ev) {
                    resolve(ev.target.result);
                }
            })
        }
        fileUp.onchange = async function (e) {
            let file = fileUp.files[0];
            //获取base64
            let base64 = await convertBase64(file);
            //上传
            let res = await $ajax({
                url: "http://127.0.0.1:4000/single2",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: `chunk=${encodeURIComponent(base64)}&filename=${$formatFileName(file.name).filename}`
            })
            console.log(res);
            serverImg.src = res.imgSrc;

        }
    </script>
</body>

</html>